import React, {Component} from 'react';
import {
	Platform,
	StyleSheet,
	Image,
	Text,
	View,
	TextInput,
	PixelRatio,
	TouchableOpacity,
	ScrollView,
	Alert, AsyncStorage
} from 'react-native';
import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button'
var Common = require('./common');
var codeFlag = true;
const pixelRatio = PixelRatio.get();
const dismissKeyboard = require('dismissKeyboard');
export default class Register extends Component<Props> {
	constructor(props) {
		super(props);
		this.state = {
			phone: '',
			imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514356844477&di=7c57fde0860194258cbec5c2720e0cf5&imgtype=0&src=http%3A%2F%2Fwww.swkweike.com%2Fdata%2Fuploads%2F2015%2F05%2F26%2F20430804665564348adc669.png',
			password: '',
			repassword: '',
			uname: '',
			realname: '',
			idcard: '',
			regCode: '',
			cookie: {},
			currentTime: 61,
			codeCaptchaTips: '获取验证码'
		};
	}

	login() {
		var _this = this;
		Common.ajaxPost(Common.url + 'login.php', function (res) {
			if (res.code == "0000") {

			}
		}.bind(this), {verify: '08login', t: ''});
	}

	getCode() {
		var time = new Date().getTime();
		this.setState({
			imgsrc: Common.url + 'tools/regcode.php?verify=08login&t=' + time

		})
	}

	getYanzhengma(){
		var _this = this;

		if(this.state.phone == ''){
			Alert.alert('请填写手机号');
			return false;
		}

		if(codeFlag){
			var config = {
				method: 'POST',
				headers: {
					'Accept': 'application/json',
					'Content-Type': 'application/json',
					'credentials': 'include'
				},
				credentials: 'include'
			}

			var param = {mobile: _this.state.phone};
			if (param) {
				config["body"] = JSON.stringify(param);
			}

			fetch(Common.url + 'thinksns/index.php?app=public&mod=Passport&act=doSendSms', config).then((response) =>{
				console.log(response.headers)
				this.setState({
					cookie: response.headers.map['set-cookie']
				});
				return response.json()
			} ).then((res) => {
				if (res.status == 1) {
					console.log(res)
					Alert.alert('发送成功')
				}
			})
		}

		var currentTime = _this.state.currentTime;

		var interval = setInterval(function () {
			codeFlag = false;
			currentTime--;
			_this.setState({
				codeCaptchaTips: currentTime + 's',
			})

			if (currentTime <= 0) {
				codeFlag = true;
				clearInterval(interval)
				_this.setState({
					codeCaptchaTips: '获取验证码',
					currentTime: 61,
				})
			}
			else{

			}
		}, 1000);
	}

	toRegister() {
		var _this = this;

		var config = {
			method: 'POST',
			headers: {
				'Accept': 'application/json',
				'Content-Type': 'application/json',
				'credentials': 'include',
				'Cookie': _this.state.cookie
			},
			credentials: 'include'
		}

		var param = {
			mobile: this.state.phone,
			regType: 'phone',
			password: this.state.password,
			repassword: this.state.repassword,
			uname: this.state.uname,
			realname: this.state.realname,
			idcard: this.state.idcard,
			regCode: this.state.regCode
		};
		if (param) {
			config["body"] = JSON.stringify(param);
		}

		fetch(Common.url + 'thinksns/index.php?app=public&mod=Register&act=doStep1&is_ajax=1', config).then((response) =>{
			console.log(response.headers)
			return response.json()
		} ).then((res) => {
			console.log(res)
			if (res.status == 1) {
				console.log(res)
			}
			else{
				Alert.alert(res.info)
			}
		})
	}

	onSelect(index, value){
        this.setState({
         radio: value
      })
     }

	componentWillMount() {
		this.getCode();
	}

	render() {
		return (
			<View style={styles.container}>
				<ScrollView>
					<View style={styles.row}>
						<Text style={styles.leftTxt}>手机号</Text>
						<TextInput
							style={styles.text}
							onChangeText={(text) => {
								this.setState({
									phone:text
								})
							}}
							placeholder='请输入手机号'
							placeholderTextColor='#d9d9d9'
						/>
					</View>
					<View style={styles.row}>
						<Text style={styles.leftTxt}>验证码</Text>
						<TextInput
							style={styles.text}
							onChangeText={(text) => {
								this.setState({
									regCode:text
								})
							}}
							placeholder='请输入验证码'
							placeholderTextColor='#d9d9d9'
						/>
						<TouchableOpacity onPress={this.getYanzhengma.bind(this)}>
							<Text style={{marginRight:20,color:'#3e79fe'}}>{this.state.codeCaptchaTips}</Text>
						</TouchableOpacity>
					</View>
					<View style={styles.row}>
						<Text style={styles.leftTxt}>登录密码</Text>
						<TextInput
							style={styles.text}
							onChangeText={(text) => {
								this.setState({
									password: text
								})
							}}
							placeholder='请输入密码'
							placeholderTextColor='#d9d9d9'
						/>
					</View>
					<View style={styles.row}>
						<Text style={styles.leftTxt}>重复密码</Text>
						<TextInput
							style={styles.text}
							onChangeText={(text) => {
								this.setState({
									repassword: text
								})
							}}
							placeholder='请输入密码'
							placeholderTextColor='#d9d9d9'
						/>
					</View>
					<View style={styles.row}>
						<Text style={styles.leftTxt}>昵称</Text>
						<TextInput
							style={styles.text}
							onChangeText={(text) => {
								this.setState({
									uname:text
								})
							}}
							placeholder='请输入真实姓名'
							placeholderTextColor='#d9d9d9'
						/>
					</View>
					<View style={styles.row}>
						<Text style={styles.leftTxt}>真实姓名</Text>
						<TextInput
							style={styles.text}
							onChangeText={(text) => {
								this.setState({
									realname:text
								})
							}}
							placeholder='请输入真实姓名'
							placeholderTextColor='#d9d9d9'
						/>
					</View>
					<View style={styles.row}>
						<Text style={styles.leftTxt}>身份证号</Text>
						<TextInput
							style={styles.text}
							onChangeText={(text) => {
								this.setState({
									idcard:text
								})
							}}
							placeholder='请输入身份证号'
							placeholderTextColor='#d9d9d9'
						/>
					</View>
					<TouchableOpacity activeOpacity={1} style={{paddingLeft:20,paddingTop:20}}>
						<RadioGroup  onSelect = {(index, value) => this.onSelect(index, value)} >
							<RadioButton value={'item'}>
								<Text style={styles.tips}>我已阅读并同意<Text style={{color: '#3e79fe'}}>服务协议</Text></Text>
							</RadioButton>

						</RadioGroup>

					</TouchableOpacity>
					<TouchableOpacity style={styles.btnLogin} activeOpacity={0.6} onPress={this.toRegister.bind(this)}>
						<Text style={{color: '#fff'}}>立即注册</Text>
					</TouchableOpacity>
				</ScrollView>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		height: Common.screenHeight,
		backgroundColor: '#fff',
	},
	logo: {
		paddingTop: 100,
		height: 300,
		justifyContent: 'center',
		alignItems: 'center'
	},
	row: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingLeft: 36,
		borderBottomWidth: 1,
		borderBottomColor: '#f0f0f0'
	},
	leftTxt:{
		width:80,
	},
	text: {
		flex: 1,
		height: 54,
		color: '#333'
	},
	btnLogin: {
		height: 36,
		backgroundColor: '#3e79fe',
		marginRight: 38,
		marginLeft: 38,
		marginTop: 42,
		marginBottom: 38,
		borderRadius: 18,
		justifyContent: 'center',
		alignItems: 'center',
	},
	tips: {
		fontSize: 14,
		color: '#a7a7a7'
	}
});
